<template>
  <div class="detail">
    <detail-nav-bar></detail-nav-bar>
    <detail-banner :gallery="gallery"></detail-banner>
    <detail-courier :title="title"></detail-courier>
    <detail-info :info="info"></detail-info>
    <detail-count @countClick="countClick"></detail-count>
    <detail-params :attribute="attribute"></detail-params>
    <detail-desc :desc="desc"></detail-desc>
    <detail-title class="detail-title">
      <div slot="text">常见问题</div>
    </detail-title>
    <detail-problem :issue="issue"></detail-problem>

    <detail-title class="detail-title-watch">
      <div slot="text">大家都在看</div>
    </detail-title>
    <detail-product
      @detailClick="detailClick"
      :productList="productList"
    ></detail-product>
    <detail-tab-bar
      @buyClick="buyClick"
      @addClick="addClick"
      :cartList="cartList"
      @collectClick="collectClick"
      :isCollect="collected"
    ></detail-tab-bar>
    <!-- 弹出层 -->
    <!-- <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" /> -->
    <!-- 图标位置  注意一下 incrementClick 这里采用了组件传值  放弃vuex传值    @incrementClick="incrementClick"-->
    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-right"
      position="bottom"
      :style="{ height: '30%' }"
      @open="openClick"
      @close="closeBtn"
    >
      <detail-cart
        :info="info"
        :count="count"
        @incrementClick="incrementClick"
        @decrementClick="decrementClick"
      ></detail-cart>
    </van-popup>
  </div>
</template>

<script>
import { detailactions } from "@/network/detail";
import { mapState } from "vuex";
import { Toast } from "vant";
import { getAddCart, getCartList } from "@/network/cart";
import { getAddCollect } from "@/network/collect";
import DetailNavBar from "./children/DetailNavBar";
import DetailBanner from "./children/DetailBanner";
import DetailCourier from "./children/DetailCourier";
import DetailInfo from "./children/DetailInfo";
import DetailCount from "./children/DetailCount";
import DetailParams from "./children/DetailParams";
import DetailDesc from "./children/DetailDesc";
import DetailTitle from "./children/DetailTitle";
import DetailProblem from "./children/DetailProblem";
import DetailProduct from "./children/DetailProduct";
import DetailTabBar from "./children/DetailTabBar";
import DetailCart from "./children/DetailCart";
export default {
  created() {
    this.getDetailactions();
    this.getCartLists();
  },
  components: {
    DetailNavBar,
    DetailBanner,
    DetailCourier,
    DetailInfo,
    DetailCount,
    DetailParams,
    DetailDesc,
    DetailTitle,
    DetailProblem,
    DetailProduct,
    DetailTabBar,
    DetailCart,
  },
  data() {
    return {
      gallery: [],
      info: {},
      title: ["30天无忧退货", "48小时快速退款", "满88元免邮费"],
      attribute: [],
      desc: "",
      issue: [],
      productList: [],
      show: false, // 判断下拉购物车选项是否显示
      count: 1,
      // isClick: false,
      isDbClick: false, //判断是第二次点击
      id: "",
      cartList: [],
      collected: false,
    };
  },
  watch: {
    $route: function (to, from) {
      console.log(to, from, "哈哈哈");
      // setTimeout(() => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 500,
      });
      this.getDetailactions();
      // }, 500);
    },
  },
  methods: {
    // 弹出选择框
    countClick() {
      this.show = true;
      this.getCartLists();
    },
    // 收藏
    collectClick() {
      console.log("我被打印了", this.id);
      const datas = {
        goodsId: this.id,
        openId: localStorage.getItem("openId"),
      };
      getAddCollect(datas).then((res) => {
        // if (this.collects) {
        // this.isCollect = !this.isCollect;
        // this.collects = !this.collects;
        // }
        this.getDetailactions();
        console.log("成功", res);
      });
    },
    detailClick(items) {
      console.log(items, "哈哈哈哈");
      this.id = items.id; //
      console.log(this.id);
      let openId = localStorage.getItem("openId");
      this.$router.push({
        path: "/detail",
        query: {
          id: this.id,
          openId,
        },
      });
    },
    closeBtn() {
      this.isDbClick = false;
      console.log(this.isDbClick, "关闭时弹出");
    },
    addClick() {
      console.log("购物车添加被点击了");
      // goodsId number openId
      let goodsId = this.$route.query.id;
      // let number = 1;
      // let number = this.$store.state.count;
      let number = this.count;
      let openId = localStorage.getItem("openId");
      // this.count = number;
      const datas = {
        goodsId,
        number,
        openId,
      };
      this.show = true;
      // 判断是第二次点击 才可以添加到数据库中去
      if (this.isDbClick) {
        // 成功提示
        Toast.success("添加购物车成功");
        // 添加
        getAddCart(datas).then((res) => {
          console.log(res);
          // this.commit
        });
        console.log("hahhah");
        const datass = {
          openId,
        };
        getCartList(datass).then((res) => {
          console.log(res);
          // const cartList = res.data;
          this.cartList = res.data; // 传给下面的组件
          this.getCartLists();
          // this.$store.dispatch("addCart", cartList); // vuex 提交了一个事件
        });
      }
    },
    buyClick() {
      console.log("购买被点击了");
      let openId = localStorage.getItem("openId");
      const datass = {
        openId,
      };
      getCartList(datass).then((res) => {
        console.log(res);
      });
    },
    // 监听数字变化
    incrementClick(counts) {
      console.log(counts, "外面数字变化了");
      this.count = counts;
    },
    // 数字减少
    decrementClick(counts) {
      console.log(counts, "外面数字变化了-1");
      this.count = counts;
    },
    openClick() {
      console.log("弹出层被打开了");
      this.isDbClick = true;
    },
    // 总数字
    getCartLists() {
      let openId = localStorage.getItem("openId");
      getCartList({
        openId,
      }).then((res) => {
        this.cartList = res.data;
        console.log(this.cartList);
      });
    },
    getDetailactions() {
      this.id = this.$route.query.id;
      console.log(this.id);
      let openId = localStorage.getItem("openId");
      // let openId = this.$route.query.openId;
      const datas = {
        id: this.id,
        openId,
      };
      detailactions(datas).then((res) => {
        console.log(res, "啊哈哈哈");
        this.collected = res.collected;
        console.log(this.collected, "啊哈哈哈2");
        this.gallery = res.gallery;
        this.info = res.info; // 有购物车里面的信息
        this.attribute = res.attribute;
        this.desc = res.info.goods_desc; // 详情主要信息
        //
        this.issue = res.issue;
        this.productList = res.productList;
        console.log(res);
        console.log(this.productList); // 列表数据
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  background-color: #f4f4f4;
  overflow: hidden;
}
.detail-title {
  // margin-top: -150px;
  background-color: #fff;
}
.detail-title-watch {
  margin-top: 30px;
  background-color: #fff;
}
</style>